<template>
	<div id="icon">
		<div id="icon-first">
			<img :src="$store.state.url+'/img/lfximg/icon.png'">
			<!-- "this.$store.state.url+'/img/lfximg/icon.png'" -->
		</div>
		<div id="icon-second">
			<h3>
				<span>{{name}}</span>
			</h3>
			<p>{{ClassicsFrench}}</p>
		</div>
		<h4>{{French}}</h4>
	</div>
</template>

<script>
	export default {
		props:["name","ClassicsFrench","French"]		
	}
</script>

<style scoped="scoped" lang="scss">
	#icon {
		width: 1280px;
		height: 216px;
		padding-left: 117px;
		#icon-first {
			margin-top: 100px;
			width: 100%;
			height: 105px;
		}
		#icon-second {
			h3 {
				width: 200px;
				font-size: 26px !important;
				margin-left: 72px;
				margin-top: -10px;
			}

			p {
				width: 200px;
				margin-top: 20px;
				margin-left: 72px;
				margin-top: 14px;
				color: #c3c3c3;
				line-height: 0px;
			}
		}

		h4 {
			text-align: center;
			margin-top: -50px;
			color: #c3c3c3;
			font-size: 20px;
			font-weight: 400;
		}
	}
</style>
